<template>
  <div class="product-mobile">
    <!-- 页头 -->
    <div class="yetou">
      <div class="none3">
        <div class="bt-left">
          <h1>万力达消防设备大卖场</h1>
          <p>{{configData.mobile}}</p>
        </div>
        <div class="menu">
          <img @click="hide = !hide" src="../assets/991.jpg" />
        </div>
      </div>
    </div>
    <!-- 页头 -->
    <!--导航开始-->
    <div class="vae" v-show="hide">
      <ul class="nav-tb">
        <li :class="navmoIndex == 0 ? 'active' : ''" @click="selNav(0)">
          <router-link to="/page/home_mobile">首页</router-link>
          <!-- <a href="#">首页</a> -->
        </li>
        <li :class="{ active: navmoIndex === 1 }" @click="selNav(1)">
          <router-link to="/page/product_mobile?num=0">消防水泵</router-link>
          <!--  <a href="#">消防水泵</a> -->
        </li>
        <li :class="{ active: navmoIndex === 2 }" @click="selNav(2)">
          <router-link to="/page/product_mobile?num=1">水泵控制柜</router-link>
          <!-- <a href="#">水泵控制柜</a> -->
        </li>
        <li :class="{ active: navmoIndex === 3 }" @click="selNav(3)">
          <router-link to="/page/product_mobile?num=2">气体灭火</router-link>
          <!--  <a href="#">气体灭火</a> -->
        </li>
        <li :class="{ active: navmoIndex === 4 }" @click="selNav(4)">
          <router-link to="/page/product_mobile?num=3">火灾报警</router-link>
          <!--     <a href="#">火灾报警</a> -->
        </li>
        <li :class="{ active: navmoIndex === 5 }" @click="selNav(5)">
          <router-link to="/page/product_mobile">产品中心</router-link>
          <!-- <a href="#">产品中心</a> -->
        </li>
        <li :class="{ active: navmoIndex === 6 }" @click="selNav(6)">
          <router-link to="/page/witness_mobile">客户见证</router-link>
          <!-- <a href="#">客户见证</a> -->
        </li>
        <li :class="{ active: navmoIndex === 7 }" @click="selNav(7)">
          <router-link to="/page/news_mobile">新闻动态</router-link>
          <!-- <a href="#">新闻动态</a> -->
        </li>
        <li :class="{ active: navmoIndex === 8 }" @click="selNav(8)">
          <router-link to="/page/about_mobile">关于我们</router-link>
          <!--  <a href="#">关于我们</a> -->
        </li>
      </ul>
    </div>
    <!--导航结束-->
    <!-- 横幅开始 -->
    <div class="jingpin">
      <img src="../assets/111.jpg" />
    </div>
    <!-- 横幅结束 -->
    <!-- 产品列表开始 -->
    <div class="list">
      <div class="list-top">
        <h5>当前位置：首页>>关于我们>>{{ pageSearch?'搜索列表':title }}</h5>
        <div class="att">
          <div class="attss">
            <input class="att1" v-model="pageSearch"/>
            <span class="att2" @click="getSearchShop">搜索</span>
          </div>
          <p>
            <!-- 大家都在搜：消防水泵&nbsp;&nbsp;火灾报警
            &nbsp;&nbsp;气体灭火&nbsp;&nbsp;消防泵控制柜 -->
          </p>
          <el-select v-model="value" @change="ttchange" v-show="!pageSearch">
            <el-option
              v-for="item in options"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            >
            </el-option>
          </el-select>
        </div>
      </div>
      <div class="list-foot">
        <div class="list1">
          <div class="listbox" v-for="(item, index) in shopList" :key="index" @click="goshopDetail(item.id)">
            <div class="listbox-top">
              <img :src="item.img[0]" />
            </div>
            <div class="listbox-crue">
              <p class="one_over">{{ item.title }}</p>
            </div>
            <div class="listbox-foot">
              <p @click.stop="goshopDetail(item.id)">查看详情</p>
              <p @click.stop="goimmediately()">立即咨询</p>
            </div>
          </div>
          <div v-show="!pageSearch&&shopList.length<1">暂未内容</div>
          <div v-show="pageSearch&&shopList.length<1">暂未搜索到内容</div>
        </div>
      </div>
      <div class="ppt">
        <el-pagination
          background
          layout="prev, pager, next"
          prev-text="上一页"
          next-text=" 下一页 "
          :current-page.sync="page.cont"
          :page-size="page.size"
          :page-count="page.allcont"
          :total="page.total"
          @size-change="sizechange"
          @current-change="sizechange"
        ></el-pagination>
      </div>
    </div>
    <!-- 产品列表结束 -->
    <!--脚部开始-->
    <div class="foot">
      <div class="foot_top">
        <div class="who">
          <h1>联系我们</h1>
          <p>服务热线：{{configData.mobile}}</p>
          <p>QQ：{{configData.qq}}</p>
          <p>地址：{{configData.city}}</p>
        </div>
      </div>
      <div class="foots">
        <div class="whoo">
          <p>
            {{configData.copyright}}<br />
            {{configData.record_number}}
          </p>
        </div>
      </div>
    </div>
    <!--脚部结束-->
  </div>
</template>

<script>
export default {
  data() {
    return {
      navmoIndex: 0,
      hide: false,
      configData:{},
      title: "消防水泵系列",
      shopnav: [], // 商品分类
      page: {
        size: 6,
        cont: 1,
        allcont: 1,
        total: 10,
      },
      shopList: [],
      showdetailFlag: false, // 展示详情
      shopDetail: {}, // 商品详情
      options: [
        {
          value: "选项1",
          label: "消防水泵",
        },
        {
          value: "选项2",
          label: "水泵控制柜",
        },
        {
          value: "选项3",
          label: "气体灭火",
        },
        {
          value: "选项4",
          label: "火灾报警",
        },
        {
          value: "选项5",
          label: "产品中心",
        },
      ],
      value: "",
      pageSearch: '',
    };
  },
  created() {
    if (localStorage.getItem("navmoIndex")) {
      this.navmoIndex = +localStorage.getItem("navmoIndex");
      console.log(this.navmoIndex);
    }
  },
  mounted() {
    this.getShopClass();
    if (this.$route.query.search) {
      this.pageSearch = this.$route.query.search
      this.getSearchShop()
      return
    }
    this.getShopList();
    this.getConfig();
  },
  watch: {
    //监听相同路由下参数变化的时候，从而实现异步刷新
    $route(to, from) {
      //做一些路由变化的响应
      /** 初始化其他数据 */
      // let pid = this.$route.query.num;
      this.navIndex = +this.$route.query.num || 0;
      console.log("产品", this.navIndex);
      this.shopid = this.options[this.navIndex].id;
      this.value = this.options[this.navIndex].name
      this.ttchange(this.shopid);
      // if(pid){
      //     this.initOther(pid);
      // }
    },
  },
  methods: {
    selNav(a) {
      this.navmoIndex = a;
      localStorage.setItem("navmoIndex", this.navmoIndex);
      console.log(a, this.navmoIndex);
    },
    selShopNav(data, i) {
      this.showdetailFlag = false;
      // 切换分类
      this.navIndex = i;
      this.title = data.name;
      this.shopid = data.id;
      this.getShopList(); // 商品对应列表
    },
    getShopClass() {
      // 商品分类
      var _this = this;
      _this.$ajax
        .get("http://api.wld119.com/api/v1/goods/index")
        .then((res) => {
          console.log("商品分类", res.data.result);
          this.options = res.data.result;
          console.log("aaaa", this.options);
          this.value = this.options[0].name;
          if (this.$route.query.num) {
            this.value = this.options[this.$route.query.num].name
            this.ttchange(this.options[this.$route.query.num].id);
            return
          }
          this.ttchange(this.options[0].id);
          // this.shopnav = res.data.result;
          // this.shopid = this.shopnav[0].id;
          // this.getShopList();
        })
        .catch((error) => {
          console.log(error);
        });
    },
    getShopList() {
      if (this.pageSearch) return
      // 商品列表
      var _this = this;
      _this.$ajax
        .get(
          "http://api.wld119.com/api/v1/goods/indexs?id=" +
            this.shopid +
            "&page=" +
            this.page.cont +
            "&limit=" + this.page.size
        )
        .then((res) => {
          console.log("商品列表", res.data.result);
          this.page.total = res.data.result.total;
          this.page.allcont = res.data.result.per_page;
          this.shopList = res.data.result.data;
          if (this.shopList.length > 0) {
            for (const item of this.shopList) {
              item.flag = false;
            }
            this.shopList[0].flag = true;
          }
        })
        .catch((error) => {
          console.log(error);
        });
    },
    sizechange(a) {
      console.log(a);
      this.page.cont = a;
      this.shopList = []
      this.getShopList();
    },
    getSearchShop () {
      // 搜索商品列表
      var _this = this;
      _this.$ajax
        .get("http://api.wld119.com/api/v1/goods/like?title=" + this.pageSearch)
        .then((res) => {
          console.log("搜索商品详情", res.data.result);
          this.search = ''
          this.shopList = res.data.result.data;
          if (this.shopList.length > 0) {
            for (const item of this.shopList) {
              item.flag = false;
            }
            this.shopList[0].flag = true;
          }
        })
        .catch((error) => {
          console.log(error);
        });
    },
     getConfig () {
      var _this = this;
      _this.$ajax
        .get("http://api.wld119.com/api/v1/config")
        .then((res) => {
          console.log("配置", res.data.result);
          this.configData = res.data.result;
 
        })
        .catch((error) => {
          console.log(error);
        });
    },
    getShopDetail(id) {
      // 商品详情
      var _this = this;
      _this.$ajax
        .get("http://api.wld119.com/api/v1/goods/index_info?id=" + id)
        .then((res) => {
          console.log("商品详情", res.data.result);
          this.showdetailFlag = true;
          this.shopDetail = res.data.result;
        })
        .catch((error) => {
          console.log(error);
        });
    },
    goshopDetail(id) {
      this.$router.push({ path: "/page/details_mobile" ,query: {
          id: id
        }});
    },
    ttchange(id) {
      this.page.cont = 1;
      console.log(id)
      this.shopid = id;
      this.getShopList();
    },
    mouseOver(i) {
      for (const item of this.shopList) {
        item.flag = false;
      }
      this.shopList[i].flag = true;
      this.$forceUpdate();
    },
    goimmediately() {
      this.$router.push({ path: "/page/about_mobile?num=6" });
    },
  },
};
</script>

<style  scoped>
.product-mobile {
  max-width: 7.5rem;
  margin: 0 auto;
  overflow: hidden;
  /* padding-bottom: 3.2rem; */
}
/* 页头 */
.yetou {
  color: #fff;
  background: #0061ae;
  height: 1.4rem;
}
.none3 {
  width: 7rem;
  margin: 0 auto;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  overflow: hidden;
}
.bt-left {
  padding: 0.1rem;
}
.bt-left h1 {
  font-size: 0.45rem;
}
.bt-left p {
  font-size: 0.35rem;
}
.menu img {
  width: 0.8rem;
}

/* 页头 */
/* 导航开始*/
.nav-tb {
  width: 100%;
  text-align: center;
  background: #f9f9f9;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: flex-start;
  overflow: hidden;
}
.vae a {
  display: block;
  border: 1px solid #ededed;
  padding: 0.2rem;
  line-height: 0.4rem;
}
.nav-tb li {
  width: 2.5rem;
}
.nav-tb a:hover {
  color: #ffffff;
  background: #d6af62;
}
/* 导航结束*/
/* 横幅开始 */
.jingpin img {
  width: 100%;
}
/* 横幅结束 */
/* 产品列表开始 */
.list {
  width: 7rem;
  min-height: 6rem;
  margin: 0 auto;
  overflow: hidden;
}
.list-top {
  width: 7rem;
  margin: 0 auto;
  overflow: hidden;
}
.att {
  width: 7rem;
  text-align: center;
  margin: 0 auto;
  overflow: hidden;
}
.attss {
  margin-top: 0.2rem;
  display: flex;
  justify-content: center;
  overflow: hidden;
}
.att1 {
  line-height: 0.5rem;
  background: #e5e5e5;
  border: 0 solid #fff;
}
.att2 {
  text-align: center;
  line-height: 0.5rem;
  width: 1rem;
  color: #fff;
  border: 0;
  background: #0061ae;
}
.att p {
  display: block;
  font-size: 0.25rem;
  padding: 0.2rem;
}
.list-foot {
  width: 7rem;
  margin: 0 auto;
  text-align: center;
}
.list1 {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  overflow: hidden;
}
.listbox {
  width: 3.4rem;
  height: 4.8rem;
  margin-bottom: 0.3rem;
  background-image: linear-gradient(to right, #EEEEEE,#E2E2E2);
  padding: 5px 0;
}
.listbox-top img {
  width: 3rem;
  height: 3rem;
  object-fit: cover;
  /* border: 1px #666 solid; */
}
.listbox-crue p {
  font-weight: bold;
  margin: 15px 0;
}
.listbox-foot {
  margin-top: 0.1rem;
  display: flex;
  justify-content: space-around;
  overflow: hidden;
}
.listbox-foot p:first-child {
  background: #666;
  color: #fff;
}
.listbox-foot p {
  /* margin-left: 0.25rem; */
  border-radius: 0.1rem;
  border: 1px solid #333;
  margin-bottom: 0.1rem;
  padding: 0 4px;
  font-size: 0.25rem;
}
.el-select {
  width: 7rem;
  margin-bottom: 0.3rem;
}
.ppt {
  width: 7rem;
  text-align: center;
  margin-top: 0.1rem;
  margin-bottom: 0.2rem;
}
/* 产品列表结束 */
/* 页脚开始 */
/* .foot{
  position: fixed;
  bottom: 0;
  width: 100%;
} */
.foot_top {
  line-height: 0.45rem;
  margin: 0 auto;
  background: #0061ae;
  color: #fff;
  overflow: hidden;
}
.foot_top h1 {
  font-size: 0.35rem;
  padding: 0.1rem;
}
.foot_top p {
  font-size: 0.25rem;
  padding: 0 0.1rem;
  padding-bottom: 0.1rem;
}
.foots {
  line-height: 0.4rem;
  margin: 0 auto;
  background: #666;
  color: #fff;
}
.foots p {
  font-size: 0.2rem;
  text-align: center;
}
.who,
.whoo {
  width: 7rem;
  margin: 0 auto;
}
/* 页脚结束 */
</style>